<template>
  <ele-page>
    <!-- 搜索表单 -->
    <ele-card :body-style="{ paddingTop: '8px' }">
      <!-- 表格 -->
      <ele-pro-table
        ref="tableRef"
        :columns="columns"
        :datasource="datasource"
        :show-overflow-tooltip="true"
        v-model:selections="selections"
        highlight-current-row
        row-key="id"
        row-click-checked
        border
        stripe
        size="small"
      >
        <template #balance="{ row }">
          <span class="blue pointer" @click="openBalance(row, '')">
            {{ row.balance }}
          </span>
        </template>
        <template #in="{ row }">
          <span class="blue pointer" @click="openBalance(row, '1')">
            {{ row.in }}
          </span>
        </template>
        <template #out="{ row }">
          <span class="blue pointer" @click="openBalance(row, '2')">
            {{ row.out }}
          </span>
        </template>
        <template #withdraw_create="{ row }">
          <span class="blue pointer" @click="openWithdraw(row, 0)">
            {{ row.withdraw_create }}
          </span>
        </template>
        <template #withdraw="{ row }">
          <span class="blue pointer" @click="openWithdraw(row, 1)">
            {{ row.withdraw }}
          </span>
        </template>
        <template #withdraw_false="{ row }">
          <span class="blue pointer" @click="openWithdraw(row, 2)">
            {{ row.withdraw_false }}
          </span>
        </template>
        <template #deposit="{ row }">
          <span class="blue pointer" @click="openPayRecord(row, 3)">
            {{ row.deposit }}
          </span>
        </template>
        <template #repay="{ row }">
          <span class="blue pointer" @click="openPayRecord(row, 4)">
            {{ row.repay }}
          </span>
        </template>
        <template #salary="{ row }">
          <span class="blue pointer" @click="openJobSalary(row)">
            {{ row.salary }}
          </span>
        </template>
        <template #wage="{ row }">
          <span class="blue pointer" @click="openAdvance(row, 'apply')">
            {{ row.wage }}
          </span>
        </template>
        <template #wage_success="{ row }">
          <span class="blue pointer" @click="openAdvance(row, 'paid')">
            {{ row.wage_success }}
          </span>
        </template>
        <template #bouns="{ row }">
          <span class="blue pointer" @click="openBouns(row)">
            {{ row.bouns }}
          </span>
        </template>
        <template #cost="{ row }">
          <span class="blue pointer" @click="openCost(row)">
            {{ row.cost }}
          </span>
        </template>
        <template #toolbar="{}">
          <el-button type="success" @click="exportExcel" :icon="DocumentCopy">
            导出表格
          </el-button>
        </template>
      </ele-pro-table>
    </ele-card>

    <!-- 提现详情 -->
    <withdraw
      v-model="showWithDraw"
      :data="current"
      :status="showWithDrawStatus"
    />

    <!-- 充值详情 -->
    <pay-record
      v-model="showPayRecord"
      :data="current"
      :type="showPayRecordType"
    />

    <!-- 工资发放详情 -->
    <job-salary v-model="showJobSalary" :data="current" />

    <!-- 预支工资 -->
    <advance v-model="showAdvance" :data="current" :type="showAdvanceType" />

    <!-- 推荐奖励 -->
    <bouns v-model="showBouns" :data="current" />

    <!-- 推荐奖励 -->
    <cost v-model="showCost" :data="current" />
    <!-- 资产详情 -->
    <balance v-model="showBalance" :data="current" :type="showBalanceType" />
  </ele-page>
</template>

<script setup>
  import { ref, computed } from 'vue';
  import { DocumentCopy } from '@element-plus/icons-vue';

  import Balance from './components/balance.vue';
  import Withdraw from './components/withdraw.vue';
  import PayRecord from './components/pay-record.vue';
  import JobSalary from './components/job-salary.vue';
  import Advance from './components/advance.vue';
  import Bouns from './components/bouns.vue';
  import Cost from './components/cost.vue';
  import { pageBalanceReport, exportWithdrawList } from '@/api/money';
  import { EleMessage } from 'ele-admin-plus/es';

  /** 表格实例 */
  const tableRef = ref(null);

  /** 表格列配置 */
  const columns = computed(() => {
    const cols = [];

    cols.push(
      {
        prop: 'report_date',
        label: '日期',
        minWidth: 105,
        align: 'center'
      },
      {
        label: '用户钱包',
        align: 'center',
        children: [
          {
            slot: 'balance',
            label: '余额',
            minWidth: 100,
            align: 'center'
          },
          {
            slot: 'in',
            label: '进',
            minWidth: 100,
            align: 'center'
          },
          {
            slot: 'out',
            label: '出',
            minWidth: 100,
            align: 'center'
          }
        ]
      },
      {
        label: '提现',
        align: 'center',
        children: [
          {
            slot: 'withdraw_create',
            label: '提现申请',
            minWidth: 100,
            align: 'center'
          },
          {
            slot: 'withdraw',
            label: '处理提现',
            minWidth: 100,
            align: 'center'
          },
          {
            slot: 'withdraw_false',
            label: '提现失败',
            minWidth: 100,
            align: 'center'
          }
        ]
      },
      {
        label: '充值收入',
        align: 'center',
        children: [
          {
            slot: 'deposit',
            label: '保证金',
            minWidth: 100,
            align: 'center'
          },
          {
            slot: 'repay',
            label: '还款',
            minWidth: 100,
            align: 'center'
          }
        ]
      },
      {
        slot: 'salary',
        label: '工资发放',
        minWidth: 100,
        align: 'center'
      },
      {
        slot: 'cost',
        label: '费用报销',
        minWidth: 100,
        align: 'center'
      },
      {
        slot: 'bouns',
        label: '推荐奖励',
        minWidth: 100,
        align: 'center'
      },
      {
        label: '预支工资',
        align: 'center',
        children: [
          {
            slot: 'wage',
            label: '申请',
            minWidth: 100,
            align: 'center'
          },
          {
            slot: 'wage_success',
            label: '打款',
            minWidth: 100,
            align: 'center'
          }
        ]
      }
    );

    return cols;
  });

  /** 表格选中数据 */
  const selections = ref([]);

  /** 当前编辑数据 */
  const current = ref(null);

  /** 表格数据源 */
  const datasource = ({ page, limit, where, orders }) => {
    return pageBalanceReport({
      ...where,
      ...orders,
      page,
      limit
    });
  };
  /** 导出表格 */
  const exportExcel = () => {
    const loading = EleMessage.loading('请求中..');
    tableRef.value?.fetch(({ where }) => {
      // 方法的参数与数据源的完全一致
      // 请求查询全部接口
      console.log(where);
      var requestData = where;
      requestData.limit = 99999999;
      requestData.page = 1;

      exportWithdrawList(requestData)
        .then((res) => {
          loading.close();
          window.open(res);
        })
        .catch(() => {
          loading.close();
        });
    });
  };

  /** 提现详情 */
  const showWithDrawStatus = ref('');
  const showWithDraw = ref(false);
  const openWithdraw = (row, status) => {
    current.value = row ?? null;
    showWithDraw.value = true;
    showWithDrawStatus.value = status;
  };

  /** 充值 */
  const showPayRecordType = ref(3);
  const showPayRecord = ref(false);
  const openPayRecord = (row, type) => {
    current.value = row ?? null;
    showPayRecord.value = true;
    showPayRecordType.value = type;
  };

  /** 工资发放记录 */
  const showJobSalary = ref(false);
  const openJobSalary = (row) => {
    current.value = row ?? null;
    showJobSalary.value = true;
  };

  /** 预支记录 */
  const showAdvanceType = ref('');
  const showAdvance = ref(false);
  const openAdvance = (row, type) => {
    current.value = row ?? null;
    showAdvance.value = true;
    showAdvanceType.value = type;
  };

  /** 推荐奖励 */
  const showBouns = ref(false);
  const openBouns = (row) => {
    current.value = row ?? null;
    showBouns.value = true;
  };

  /** 报销记录 */
  const showCost = ref(false);
  const openCost = (row) => {
    current.value = row ?? null;
    showCost.value = true;
  };

  /** 余额详情 */
  const showBalance = ref(false);
  const showBalanceType = ref('');
  const openBalance = (row, type) => {
    current.value = row ?? null;
    showBalance.value = true;
    showBalanceType.value = type;
  };
</script>

<script>
  export default {
    name: 'SystemUser'
  };
</script>
